<template>
  <div class="ExchEnd">
    <div class="ExchShow" :class="{'show' : show}" @click="openClose"></div>
    <div class="window open"  :class="{'Wshow' : show}">
      <div class="title">{{ $t('aut.跟单结算') }}</div>

      <div class="flx">
        <div class="box">{{user.followAmount}} USDT  <span>{{ $t('aut.跟单金额') }}</span></div>
        <div class="box fen">{{user.earnRate}} <span>{{ $t('aut.盈亏率') }}</span></div>
      </div>

      <div class="btn ">{{ $t('aut.确定') }}</div>

    </div>
  </div>

</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ExchEnd",
  data(){
    return{
      show:true
    }
  },
  computed: {
    ...mapState({
      user: state => state.user,
    })
  },
  methods:{
    openClose(){
      this.show = false;

      setTimeout(()=>{
        this.$emit("close");
      },1000)
    },
  }
}
</script>

<style lang="scss" scoped>
.ExchShow{
  position: fixed; z-index: 98;
  top: 0px; left: 0px;
  background: rgba(0,0,0,0.5);
  width: 100%; height: 100%;
  -webkit-animation: Show 0.6s linear 1; /* Chrome, Safari, Opera */
  animation: Show 0.6s linear 1;

  opacity: 0; transform:scale(1.2);
  transition: all 1S;
}

.ExchShow.show{
  opacity: 1; transform:scale(1)
}
@keyframes Show{
  0%{opacity: 0; transform:scale(1.2) }
  100%{opacity: 1; transform: scale(1)}
}

.window{
  position: fixed; z-index: 99;
  top: 50%; left: 50%;
  opacity: 0;
  transform: translate(-50% , -50%) scale(1.2);
  transition: all 1S;
  -webkit-animation: Wshow 0.6s linear 1; /* Chrome, Safari, Opera */
  animation: Wshow 0.6s linear 1;
}
.window.Wshow{
  opacity: 1;
  transform: translate(-50% , -50%)  scale(1);
}

@keyframes Wshow{
  0%  {opacity: 0; transform:translate(-50% , -50%) scale(1.2);}
  100%{opacity: 1; transform:translate(-50% , -50%) scale(1)}
}

.open{
  background: #2c395d; text-align: center;
  width: 500px; border-radius: 20px; padding: 30px;

  .title{margin: 10px}
  .flx{
    display: flex; margin: 40px 0px;
    .box{
      flex: 1; font-size: 34px; line-height: 50px;
      span{display: block; font-size: 24px; color: #FFF}
    }
    .fen{color: #c9b079}
    .box:nth-child(2){border-left: 2px solid #FFF }
  }
  .btn{
    margin: 20px auto;
    display: inline-block; line-height: 50px; padding: 0px 40px;
    border-radius: 30px; background: #2979FF;
  }
}

</style>